<template>
  <div class="search">
    <Card>
      <Table
        :loading="loading"
        border
        :columns="columns"
        class="mt_10"
        :data="data"
        ref="table"
      ></Table>
    </Card>
    <!-- 修改模态框 -->
    <Modal v-model="descFlag" width="1000">
      <Form ref="form" :model="form" :rules="ruleValidate" :label-width="200">
        <FormItem label="PLUS会员类型:">
          <div>{{ plusTypeName }}</div>
        </FormItem>
        <FormItem label="价格:" prop="price">
          <Input
            v-model="form.price"
            style="width: 200px"
            placeholder="最多两位小数"
            type="number"
          />
        </FormItem>
        <FormItem label="有效期（天）:" prop="plusDays">
          <Input
            v-model="form.plusDays"
            style="width: 200px"
            placeholder="最多两位小数"
            type="number"
          />
        </FormItem>
        <FormItem label="折扣率:" prop="discountRate">
          <Input
            type="number"
            v-model="form.discountRate"
            style="width: 200px"
            placeholder="最多两位小数"
          />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="descFlag = false">取消</Button>
        <Button type="primary" @click="Submit">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import region from "@/components/region";
import * as API_Member from "@/api/member.js";
import ossManage from "@/views/sys/oss-manage/ossManage";
import * as RegExp from "@/libs/RegExp.js";

import { setplus, getplusList } from "@/api/shopNewApi.js";
import { json } from "body-parser";
export default {
  name: "member",
  components: {
    region,
    ossManage,
  },
  data() {
    return {
      currentIndex: null,
      submitLoading: false,
      plusTypeName: "",
      descFlag: false, //编辑查看框
      loading: true, // 表单加载状态
      addFlag: false, // modal显隐控制
      updateRegion: false, // 地区
      addMemberForm: {
        // 添加用户表单
        mobile: "",
        username: "",
        password: "",
      },

      picModelFlag: false, // 选择图片
      form: {
        price: 0,
        plusDays: 0,
        discountRate: 0,
      }, // 表单数据
      ruleValidate: {
        price: [{ required: true, message: "请输入价格" }],
        plusDays: [{ required: true, message: "请输入有效期天数" }],
        discountRate: [{ required: true, message: "请输入折扣率" }],
      }, //修改验证
      columns: [
        { title: "序号", type: "index", tooltip: true },
        {
          title: "PLUS会员类型",
          key: "plusType",
          tooltip: true,
          render: (h, params) => {
            if (params.row.plusType === "0") {
              return h("Tag", { props: { color: "blue" } }, "月卡");
            } else if (params.row.plusType === "1") {
              return h("Tag", { props: { color: "geekblue" } }, "季卡");
            } else {
              return h("Tag", { props: { color: "purple" } }, "年卡");
            }
          },
        },
        { title: "价格", key: "price" },
        { title: "有效期（天）", key: "plusDays" },
        { title: "折扣率", key: "discountRate" },
        {
          title: "操作",
          key: "action",
          align: "center",
          fixed: "right",
          render: (h, params) => {
            return h(
              "div",
              {
                style: { display: "flex", justifyContent: "center" },
              },
              [
                h(
                  "Button",
                  {
                    props: { type: "info", size: "small", ghost: true },
                    style: { marginRight: "5px" },
                    on: {
                      click: () => {
                        this.editPerm(params);
                      },
                    },
                  },
                  "编辑"
                ),
              ]
            );
          },
        },
      ],
      data: [], // 表单数据
    };
  },
  methods: {
    getList() {
      getplusList().then((res) => {
        if (res.success) {
          this.loading = false;
          this.data = res.result;
        }
      });
    },

    //编辑
    editPerm(val) {
      if (val.row.plusType === "0") {
        this.plusTypeName = "月卡";
      } else if (val.row.plusType === "1") {
        this.plusTypeName = "季卡";
      } else {
        this.plusTypeName = "年卡";
      }
      Object.keys(this.form).forEach(i=>{
        this.form[i] = val.row[i]
      })
      this.descFlag = true;
      this.currentIndex = val.index;
    },
    // 提交修改数据
    Submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let data = JSON.parse(JSON.stringify(this.data));
          Object.keys(this.form).forEach(i=>{
            data[this.currentIndex][i] = parseFloat(this.form[i]).toFixed(2);
          })
          setplus({
            configValue: JSON.stringify(data),
          }).then((res) => {
            if (res.code == 200) {
              this.$Message.success("保存成功");
              this.descFlag = false;
              this.getList();
            }
          });
        } else {
          this.$Message.error("请完善信息");
        }
      });
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
::v-deep .ivu-modal-body {
  padding-top: 50px;
}
::v-deep .ivu-table-wrapper {
  width: 100%;
}
::v-deep .ivu-card {
  width: 100%;
}
.face {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
</style>
